<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .merchant{
                width: 40px;
                height: 40px;
                border-radius: 5px;
            }
            .border-red{
                border: 1px solid red;
            }
            .border-black{
                border: 1px solid #000;
            }
            .buy-btn{
                color: #FFF;
                background-color:  #48BB48;
                height: 60px;
                line-height: 60px;
                border-radius:5px;
                text-align: center;   
                font-size: 18px;
            }
            .box-header{
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .merchant-box{
                display: flex;
                align-items: center;
            }
            .title{
                margin-left: 10px;
                font-size: 20px;
                width: 200px;
                white-space: nowrap;      /*超出的空白区域不换行*/
                overflow: hidden;         /*超出隐藏*/
                text-overflow: ellipsis;
            }
            .nick-name{
                width: 100px;
                white-space: nowrap;      /*超出的空白区域不换行*/
                overflow: hidden;         /*超出隐藏*/
                text-overflow: ellipsis;
            }
            .p-name{
                width: 100px;
                white-space: nowrap;      /*超出的空白区域不换行*/
                overflow: hidden;         /*超出隐藏*/
                text-overflow: ellipsis;
            }
            .wrap{
                padding: 10px 5px;
                width:500px;
                height:400px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
            .p-imgs{
                width:400px;
                padding: 10px 0;
                flex: 1;
            }
            .p-imgs img{
                width: 100%;
                border-radius: 5px;
            }
            .tail{
                font-size: 14px;
                color: #666;
            }
            .img-thum{
                width: 160px;
            }
            .quantity{
                color: orange;
            }
            .avatar{
                width: 40px;
                height: 40px;
                border-radius: 100%;
            }
            .user-list{
                font-size: 20px;
                height: 300px;
                overflow: hidden;
            }
            .user-list div{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin: 5px 0;
            }
            .created-at
            {
                color: #666666;
            }
            .no{
                color: #666666;
            }
            .shadow{
                box-shadow:0px -20px 15px -5px #f5f5f5;
            }
            .bg-footer{
                height: 60px;
                background-color: #48BB48;
                display: flex;
                align-items: center;
                color: #FFF;
            }
            .group-leader{
                width: 40px;
                height: 40px;
                padding-right: 10px;
                padding-left: 10px;
            }
            .user-order{
                display: flex;
                flex-direction: column;
                align-items: center;
                padding-top: 10%;
            }
            .buy-user{
                width: 60px;
                height: 60px;
                border-radius: 10px;
                border: 1px solid #48BB48;
            }
            .user-name{
                color: gray;
                font-size: 28px;
            }
            .product-name{
                color: #48BB48;
                font-size: 30px;
            }
            .bg-gray{
                background-attachment: #cccccc;
            }
        </style>
    </head>
    <body>
        <div class="border-red wrap">
            <div class="box-header">
                <div class="merchant-box">
                    <img class="merchant" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2338354870,2162591771&fm=26&gp=0.jpg" alt="">
                    <div class="title">
                        唯果联盟【订阅我更多信息】唯果联盟【订阅我更多信息】唯果联盟【订阅我更多信息】
                    </div>
                </div>
                <div class="tail">
                    27次团购
                </div>
            </div>
            <div class="p-imgs">
                <img src="https://iknow-pic.cdn.bcebos.com/b17eca8065380cd7a201b192b144ad34598281b5?x-bce-process=image/resize,m_lfit,w_600,h_800,limit_1/quality,q_85" alt="">
            </div>
            <div class="buy-btn">
                立即跟团
            </div>
        </div>
        <br/>

        <div class="border-red wrap">
            <div class="box-header">
                <div class="merchant-box">
                    <img class="merchant"
                        src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2338354870,2162591771&fm=26&gp=0.jpg"
                        alt="">
                    <div class="title">
                        刘小果~每晚8点开团刘小果~每晚8点开团刘小果~每晚8点开团
                    </div>
                </div>
                <div class="tail">
                    199人浏览
                </div>
            </div>
            <div class="p-thums">
                <img class="img-thum" src="https://iknow-pic.cdn.bcebos.com/b17eca8065380cd7a201b192b144ad34598281b5?x-bce-process=image/resize,m_lfit,w_600,h_800,limit_1/quality,q_85"
                    alt="">
                <img class="img-thum" src="https://iknow-pic.cdn.bcebos.com/b17eca8065380cd7a201b192b144ad34598281b5?x-bce-process=image/resize,m_lfit,w_600,h_800,limit_1/quality,q_85"
                    alt="">
                <img class="img-thum" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2547949805,977489555&fm=26&gp=0.jpg"
                    alt="">
                <img class="img-thum" src="https://iknow-pic.cdn.bcebos.com/b17eca8065380cd7a201b192b144ad34598281b5?x-bce-process=image/resize,m_lfit,w_600,h_800,limit_1/quality,q_85"
                    alt="">
                <img class="img-thum"
                    src="https://iknow-pic.cdn.bcebos.com/b17eca8065380cd7a201b192b144ad34598281b5?x-bce-process=image/resize,m_lfit,w_600,h_800,limit_1/quality,q_85"
                    alt="">
                <img class="img-thum"
                    src="https://iknow-pic.cdn.bcebos.com/b17eca8065380cd7a201b192b144ad34598281b5?x-bce-process=image/resize,m_lfit,w_600,h_800,limit_1/quality,q_85"
                    alt="">
            </div>
            <div class="buy-btn">
                立即跟团
            </div>
        </div>
        <br>
        <div class="border-red wrap">
            <div class="box-header">
                <div class="merchant-box">
                    <img class="merchant"
                        src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2338354870,2162591771&fm=26&gp=0.jpg"
                        alt="">
                    <div class="title">
                        刘小果~每晚8点开团刘小果~每晚8点开团刘小果~每晚8点开团
                    </div>
                </div>
                <div class="tail">
                    612人浏览
                </div>
            </div>
            <div class="user-list">
                <div>
                    <span class="no">
                        30
                    </span>
                    <img class="avatar"
                        src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3434365774,3342884301&fm=26&gp=0.jpg" alt="">
                    <span class="nick-name">李隆基</span>
                    <span class="created-at">23分钟</span>
                    <span class="p-name">金针榴莲肉</span>
                    <span class="quantity">+1</span>
                </div>
                <div>
                    <span class="no">
                        29
                    </span>
                    <img class="avatar" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3434365774,3342884301&fm=26&gp=0.jpg"
                        alt="">
                    <span class="nick-name">李*基</span>
                    <span class="created-at">23分钟</span>
                    <span class="p-name">金针榴莲肉</span>
                    <span class="quantity">+1</span>
                </div>
                <div>
                    <span class="no">
                        28
                    </span>
                    <img class="avatar" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1383113417,2796427496&fm=26&gp=0.jpg"
                        alt="">
                    <span class="nick-name">麻辣鸡丝</span>
                    <span class="created-at">23分钟</span>
                    <span class="p-name">金针榴莲肉</span>
                    <span class="quantity">+1</span>
                </div>
                <div>
                    <span class="no">
                        27
                    </span>
                    <img class="avatar" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3434365774,3342884301&fm=26&gp=0.jpg"
                        alt="">
                    <span class="nick-name">麻站长张鸡丝</span>
                    <span class="created-at">23分钟</span>
                    <span class="p-name">金针榴莲肉</span>
                    <span class="quantity">+1</span>
                </div>
                <div>
                    <span class="no">
                        26
                    </span>
                    <img class="avatar" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3434365774,3342884301&fm=26&gp=0.jpg"
                        alt="">
                    <span class="nick-name">N</span>
                    <span class="created-at">23分钟</span>
                    <span class="p-name">金针榴莲肉</span>
                    <span class="quantity">+1</span>
                </div>
                <div>
                    <span class="no">
                        25
                    </span>
                    <img class="avatar"
                        src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3434365774,3342884301&fm=26&gp=0.jpg" alt="">
                    <span class="nick-name">N</span>
                    <span class="created-at">23分钟</span>
                    <span class="p-name">金针榴莲肉</span>
                    <span class="quantity">+1</span>
                </div>
                <div>
                    <span class="no">
                        24
                    </span>
                    <img class="avatar"
                        src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3434365774,3342884301&fm=26&gp=0.jpg" alt="">
                    <span class="nick-name">N</span>
                    <span class="created-at">23分钟</span>
                    <span class="p-name">金针榴莲肉</span>
                    <span class="quantity">+1</span>
                </div>
            </div>
            <div class="buy-btn shadow">
                立即跟团
            </div>
        </div>
        <br>
        <div class="border-red wrap bg-gray">
            <div class="user-order">
                <div>
                    <img class="buy-user" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3434365774,3342884301&fm=26&gp=0.jpg"
                        alt="">
                </div>
                <div class="user-name">
                    shanJn
                </div>
                <div class="product-name">
                    4.狗粮+1
                </div>
            </div>
            <div class="bg-footer">
                <div>
                    <img class="group-leader" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3434365774,3342884301&fm=26&gp=0.jpg"
                        alt="">
                </div>
                <div>
                    <div>
                        李超
                    </div>
                    <div>
                        团一波狗粮
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>